<template>
  <div class="settings">
    <el-card class="box-card">
      <el-row>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="物料描述"
                    v-model="queryInfo.materialName"
                    clearable>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="queryInfo.pushTimeStart" size="medium"
                          type="datetime"
                          placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="queryInfo.pushTimeEnd" size="medium"
                          type="datetime"
                          placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>

        <el-col :span="2"  >
          <el-button  type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>
        </el-col>
        <el-col :span="2"  >
          <el-button    type="primary" icon="el-icon-download" @click="addImoprt">新增导入</el-button>
        </el-col>
      </el-row>
      <el-table   :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="tableData" border v-loading="loading">
        <!--<el-table-column type="index" label="序号" v-if="false" align="center" width="50">-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="applyTime" label="序号" align="center">-->
        <!--</el-table-column>-->
        <!-- 展开列 -->
<!--        <el-table-column type="expand">-->
<!--          <template slot-scope="props">-->
<!--            <div>-->
<!--              <el-table-->
<!--                :data="props.row.materailInfoList"-->
<!--                style="width: 100%"-->
<!--                :header-cell-style="{ background: '#FAFAFA' }"-->
<!--              >-->
<!--                <el-table-column label="物料编码" prop="materailNumber"></el-table-column>-->
<!--                <el-table-column label="物料描述" prop="materailName"></el-table-column>-->
<!--                <el-table-column label="数量" prop="purchaseQuantity"></el-table-column>-->
<!--                <el-table-column label="单位" prop="unit"></el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="物料编码" prop="materailNumber" align="center"  :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="物料描述" :show-overflow-tooltip="true" prop="materailName" align="center"></el-table-column>
        <el-table-column label="数量" prop="notQut" align="center"  :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="单位" prop="unit" align="center"  :show-overflow-tooltip="true"></el-table-column>

        <el-table-column prop="pushTime" label="发布时间" align="center" :show-overflow-tooltip="true" >
        </el-table-column>
        <el-table-column prop="planNumber" label="需求计划单号" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="optBtn-box">
              <el-button type="text" @click="look(scope.row)">查看</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </el-card>
    <el-dialog :visible.sync="importVisible" append-to-body width="30%">
      <p style="text-align: center;" class="map">新增导入</p>
      <el-form :model="importForm">
        <el-form-item label="导入的文件" prop="fileName">
          <el-upload   style="margin: 0 10px;" :action="importUrl+'import/uploadExcel'"
                       :on-success="uploadSuccessHandler"
                       :on-error="uploadFailHandler"
                       :before-upload="beforeUpload"
                       :file-list="fileList"
                       multiple
                       name="excel" :show-file-list="true" :headers="headers">
            <el-button  type="primary" icon="el-icon-download">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传EXCEL文件</div>
          </el-upload>

        </el-form-item>

        <el-form-item label="工程类型:" prop="fileName">
          <el-select  style="margin-right: 20px;"  clearable v-model="importForm.engType" placeholder="请选择">
            <el-option
              v-for="item in engTypes"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>


        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="importVisible = false">关闭</el-button>
        <el-button class="global-button" round type="primary" @click="submitImport">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>

  import {pageProcurement} from '@/api/purchase.js'
  let $this=null
  export default {
    data: () => ({
      tableData: [],
      loading: false,
      value: "1",
      options: [
        {label: "入库", value: "1"},
        {label: "出库", value: "2"},
      ],
      total: 0,
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        inStatus:3,
        queryNotArrial:'1'
      },
      importVisible:false,
      importForm:{
        importType:5,
        fileName:''
      },
    }),
    created() {
      $this=this
      this.getList()
    },
    methods: {
      downloadTemplate () {
        $this.isDown = true
        const ttt={
          type:5
        }
        downloadTemplateByType(ttt).then(res => {
          $this.isDown = false
          $this.downloadFile(res,  '退库申请导入模板')
        }).catch(err => {
          $this.isDown = false
          return $this.$message.error('导出文件错误')
        })
      },
      addImoprt () {
        this.importVisible = true
      },
      getList() {
        this.loading = true
        pageProcurement(this.queryInfo).then(res => {
          this.loading = false
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        })
      },
      query() {
        this.getList()
      },
      seacher(){
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryInfo.pageNo = val
        this.getList()
      },
      handleSizeChange(size) {
        this.queryInfo.pageSize = size
        this.getList()
      },
      look(row) {
        this.$router.push({
          name: "purchase",
          params: {
            id: row.id
          }
        })

      },
    }
  }
</script>

